<template>
	<view class="wrap">
		<u-gap height="20" bgColor="#f5f5f5"></u-gap>
		<u-cell-group class="datails-examine">

			<u-cell title="申请编号" :label="rowInfo.number" :clickable="true"></u-cell>
			<u-cell title="开始时间" :label="rowInfo.beginTime" :clickable="true"></u-cell>
			<u-cell title="结束时间" :label="rowInfo.endTime" :clickable="true"></u-cell>
			<u-cell title="请假时长" :label="rowInfo.days" :clickable="true"></u-cell>
			<u-cell title="请假事由" :label="rowInfo.remark" :clickable="true"></u-cell>
		</u-cell-group>
		<view style="padding: 8px 22px" v-if="viewCode === 2 ">
			<u--textarea placeholder="请填写审批意见" v-model="auditContent" maxlength="500" count></u--textarea>
		</view>
		<u-gap height="20" bgColor="#f5f5f5"></u-gap>
		<!-- 流程图 -->
		<u-time-line>
			<u-time-line-item nodeTop="2">
				<!-- 此处自定义了左边内容，用一个图标替代 -->
				<template v-slot:node>
					<image class="user-images" :src="getImg('start','','','')"></image>
				</template>
				<template v-slot:content>
					<view style="justify-content: space-between;display: flex;">
						<view class="u-order-title">开始</view>
						<view class="u-order-time">{{rowInfo.createTime}}</view>
					</view>
				</template>
			</u-time-line-item>

			<template v-for="(item,index) in historyNodeList">
				<u-time-line-item nodeTop="2" :key="item.key">
					<!-- 此处自定义了左边内容，用一个图标替代 -->
					<template v-slot:node>
						<image class="user-images" :src="getImg('','',item,historyNodeList)"></image>
					</template>
					<template v-slot:content>
						<view style="justify-content: space-between;display: flex;">
							<view class="u-order-title">{{item.nodeName}}</view>
							<view class="u-order-time">{{item.handlerTime}}</view>
						</view>
						<view class="u-order-desc">{{item.nodeContent}}</view>
					</template>
				</u-time-line-item>
			</template>

			<u-time-line-item nodeTop="2">
				<!-- 此处自定义了左边内容，用一个图标替代 -->
				<template v-slot:node>
					<image class="user-images"
						:src="getImg('','end',historyNodeList && historyNodeList.length > 0 && historyNodeList[historyNodeList.length-1],'')">
					</image>
				</template>
				<template v-slot:content>
					<view style="justify-content: space-between;display: flex;">
						<view class="u-order-title">结束</view>
						<view class="u-order-time"></view>
					</view>
				</template>
			</u-time-line-item>





		</u-time-line>



		<u-gap height="20" bgColor="#f5f5f5"></u-gap>

		<u-row gutter="32" class="bottom-box subBtn accept" justify="center" v-if="viewCode === 2 "
			style="bottom: 40rpx;margin-left: 0px;">
			<u-col span="5">
				<view><u-button type="primary" shape="circle" @click="audit()">同意</u-button>
				</view>
			</u-col>
			<u-col span="5">
				<view><u-button :plain="true" type="error" shape="circle" @click="back()">拒绝</u-button>
				</view>
			</u-col>
		</u-row>

	</view>
</template>

<script>
	import {
		getTodoAction,
		getUser,
		getWorkFlowImg,
		getCompanyId,
		uploadFilePromise,
	} from '../../../network/service/addressBook.js';
	import * as aes from '../../../common/lgaes.js';
	export default {
		data() {
			return {
				rowInfo: {},
				auditData: {},
				nextNode: '',
				currentNode: '',
				submitTableData: [],
				historyNodeList: [],
				auditContent: '',
				
			};
		},
		name: 'stamp-info',
		computed: {

		},
		props: {
			bizType: {
				type: Number,
				default: 0
			},
			billId: {
				type: String,
				default: ''
			},
			viewCode: {
				type: Number,
				default: 0
			},
			mesgId: {
				type: String,
				default: ''
			}


		},

		created() {},

		mounted() {
			this.getLeaveInfo(this.billId)

		},
		methods: {

			getImg(start, end, item, historyList) {
				return getWorkFlowImg(start, end, item, historyList)
			},
			getLeaveInfo(billId) {
				// 查询 盖章信息
				let params = {
					url: '/leave/selectOneById',
					method: 'POST',
					data: {
						id: billId
					},
				}
				getTodoAction(params).then(res => {
					console.log("res",res)
					const resList = res.data.list;
					if (resList) {
						this.rowInfo = {
							...resList,
						}
						// 获取流程信息
						this.getWorkFlowInfo()
					}
				})
			},

			

			/**
			 * 获取流程信息
			 */
			getWorkFlowInfo() {
				let workflowParams = {
					url: '/proceDef/getProcDefById',
					method: 'POST',
					data: {
						id: this.rowInfo.procDefId, // 流程实例Id
						userRoleIds: getUser().userRoleIds,
						companyId: this.rowInfo.companyId,
					},
				}
				getTodoAction(workflowParams).then(res => {
					if (res.meta.status !== "000000") {
						// 
						uni.showModal({
							title: '有异常啦！',
							content: res.data.alert_msg
						});
						return false
					} else {
						// 下一审批节点
						const nodeTemp = res.data.list.procNodeList.filter(info => info.id === this
							.rowInfo
							.nextAuditNode)[0];
						let node = {};
						const nextAuditPerson = this.rowInfo.nextAuditPerson;
						if (nextAuditPerson && nextAuditPerson.indexOf("-") > -1) {
							const strs = nextAuditPerson.split("-");
							if (!nodeTemp) {
								node = {
									id: strs[0],
									nodeName: strs[0],
									auditPerson: strs[0],
									auditPersonName: strs[1],
								};

							} else {
								node = {
									...nodeTemp,
									auditPerson: strs[0],
									// auditPersonName : strs[1],
								}
							}

						}

						// 当前节点
						const current = res.data.list.procNodeList.filter(info => info.id === this
							.rowInfo
							.currentAuditNode)[0];


						this.auditData = res.data.list // 返回结果集给对应的状态 流程审批节点
						this.nextNode = node
						this.currentNode = current
						this.historyNodeList = res.data.list.procNodeList
						console.log(this.historyNodeList)
					}

				})
			},

			

			/**
			 * 审批同意
			 */
			audit() {
				const bizType = this.bizType
				const billId = this.billId

				const count = this.nextNode.seq;
				// 界面上下一步处理人的下一步节点
				let next = this.auditData.procNodeList.filter((info) => info.seq === count + 1)[0];

				if (next === null || next === "" || next === undefined) { // 说明最后一个节点
					next = {
						id: "结束",
						nodeName: "结束",
					};
				}

				const newData = [];
				newData.push({
					key: 1,
					approval: this.auditContent ? this.auditContent : '同意',
					editable: true,
					isNew: true,
				});
				this.submitTableData = newData

				
			
				let params = {
					uid: getUser().id,
					sendPerson: getUser().person,
					handlerCompany: getCompanyId(),
					handlerUser: getUser().id,
					isDone: 1,
					id: this.currentNode.id,
					currentAuditNode: this.nextNode.id,
					nextAuditNode: next.id,
					nextAuditNodeInfo: next,
					nextAuditPerson: next.auditPerson,
					billId: this.rowInfo.id,
					billType: 2,
					procDef: this.rowInfo.procDefId,
					proName: this.rowInfo.number,
					tableData: JSON.stringify(this.submitTableData),
					nextNodeInfo: this.nextNode,
					currentNodeHz: this.currentNode,
					mesgId: this.mesgId,
					proManagerAreaId: getUser().areaId,
					number: this.rowInfo.number,
				};

				let submitType = {
					url: '/procNode/audit',
					method: 'POST',
					data: params,
				}
				getTodoAction(submitType).then(res => {
					if (res.meta.status !== "000000") {
						// 
						uni.showModal({
							title: '审批有异常啦！',
							content: res.data.alert_msg
						});
						return false
					} else {
						uni.showModal({
							title: '审批成功！',
							content: '离成功又进一步'
						});
						uni.navigateBack({
							delta: 1
						});
					}
				})


			},

			/**
			 * 审批退回
			 */
			back() {
				const bizType = this.bizType
				const billId = this.billId
				const workFlowAuditParam = []
				workFlowAuditParam.push({
					WorkFlowAuditParamInfo: this.rowInfo,
				});

				const newData = [];
				newData.push({
					key: 1,
					approval: this.auditContent ? this.auditContent : '不同意',
					editable: true,
					isNew: true,
				});
				this.submitTableData = newData



				const param = {
					url: 'proceDef/back',
					method: 'POST',
					data: {
						...this.auditData,
						workFlowAuditParam: workFlowAuditParam[0],
						billType: 2,
						backType: 1,
						uid: getUser().id,
						mesgId: this.mesgId,
						tableData: JSON.stringify(this.submitTableData),
						backNodeInfo: this.currentNode,
					}

				}

				getTodoAction(param).then(res => {
					if (res.meta.status !== "000000") {
						// 
						uni.showModal({
							title: '审批拒绝有异常啦！',
							content: res.data.alert_msg
						});
						return false
					} else {
						uni.showModal({
							title: '拒绝成功！',
							content: '流程已经退回'
						});
						uni.navigateBack({
							delta: 1
						});
					}
				})



			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.datails-examine {
		background-color: #ffffff;
	}

	.wrap .search {
		background: #ffffff;
	}

	.subBtn {
		position: fixed;
		width: 100%;
		color: #007aff;
		background-color: #007aff;
		border-radius: 10rpx;
		font-weight: 600;
	}

	.accept {
		font-weight: 600;
		text-align: center;
		color: #007aff;
		/* background-color: #007AFF; */
		position: fixed;
		bottom: 0px;
		background: rgb(255, 255, 255) none repeat scroll 0% 0%;
		z-index: 999;
	}



	.user-images {
		width: 28px;
		height: 28px;
		margin-right: 8px;
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 30rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}

	.u-time-axis {
		position: relative;
		background: #fff;
		padding: 15px 10px 10px 70px;
	}
</style>